<#assign menuId=8>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新增样衣库-${Application.systemName!}</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <link href="../css/myself.css" rel="stylesheet" type="text/css" />
        <link href="../css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" >
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
           	<section class="content-header">
                    <h1 >新增样衣
                    	<!--<small><a href="#">返回</a></small>-->
                    </h1>
                    
                    <div class="clear" style="clear:both;"></div>
                    <ol class="ol_left">
                    	<li>当前位置：</li> 
                        <li><a href="list"> 样衣库</a></li>
                        <li>> 新增样衣</li>
                    </ol> 
                    <hr class="no-margin" /> 
            </section>
            <section class="content">
            	<div class="row">
            		<div class="col-md-12">
                        <div class="box">
                            <div class="clearfix center">
                                <span class="pull-left bold">样衣图</span>
                                <div class="col-md-12 photo">
                                    <div class="col-md-4 col-md-offset-4  text-center">
                                        <span class="btn btn-primary shangchuan" id="file_upload"><input type="button" name="">点击上传款式图</span>
                                        <span>
                                            <p>建议尺寸：480*270px</p>
                                            <p>仅支持jpg、png、bmp格式</p>
                                        </span>
                                    </div>
                                    <div class="zhanshi" >
                                        <!-- <img id="preview" /> -->
                                        <div class="zhanshi_find1">
                                            <div class="col-md-8 ">
                                                <img id="zhanshi_photo" src="">
                                            </div>
                                            <div class="col-md-4">
                                                <!-- <span class="span_active">
                                                	<i class="fa fa-fw fa-times"></i>
                                                    <img src="../images/Design_draft_03.jpg">
                                                    <p style="display: block;">设为主图</p>
                                                </span> -->
                                               
                                                <a class="tianjia">
                                                    <img src="../img/tianjia.png">
                                                    <input type="file" name="" accept="image/*" id="file_upload2">
                                                </a>
                                                <div class="clear"></div>
                                                <p>建议尺寸：480*270px</p>
                                               <p>仅支持jpg、png、bmp格式</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="center custorm-view clearfix ">
                                 <span class="content-title-left bold pull-left">样衣信息</span>
                            </div>
                            <div class="center">
                                        <div class="style-chart clearfix">
                                                <div class=" find-row">
                                                    <div class=" find-col" >
                                                            <span class="find_sp">季节款式</span>
                                                            <div class="find_div find_div2 " style="border:none;">
                                                                    <label for="anser" > <input class="no"  type="checkbox" name="season"  value="春款" />&nbsp;&nbsp;&nbsp;春款</label>
                                                                    
                                                                    <label for="anser"><input class="no" type="checkbox" name="season"  value="夏款" />&nbsp;&nbsp;&nbsp;夏款</label>
                                                                    
                                                                    <label for="anser"><input class="no" type="checkbox" name="season"  value="秋款" />&nbsp;&nbsp;&nbsp;秋款</label>
                                                                    
                                                                    <label for="anser"><input class="no" type="checkbox" name="season"  value="冬款" />&nbsp;&nbsp;&nbsp;冬款</label>
                                                            </div>
                                                            <span class="find_sp">款式性别</span>
                                                            <div class="find_div find_div2" style="border:none;">
                                                                <form>
                                                                   
                                                                    <label for="anser" style="margin-right: 20px;"> <input class="no"  type="radio" name="sex"  value="男" />&nbsp;&nbsp;&nbsp;男</label>
                                                                    
                                                                    <label for="anser"><input class="no" type="radio" name="sex"  value="女" />&nbsp;&nbsp;&nbsp;女</label>
                                                                    
                                                                    <label for="anser"><input class="no" type="radio" name="sex"  value="中性" />&nbsp;&nbsp;&nbsp;中性</label>
                                                                </form>
                                                            </div>
                                                    </div>
                                                    <div class="clear"></div>
                                                     <div class=" find-col" >
                                                            <span class="find_sp">样衣分类</span>
                                                            <select class="find_div find_div2" id="category">
                                                                <option value="">请选择</option>
                                                            </select>

                                                            <span class="find_sp">来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</span>
                                                            <input class="find_div find_div2" type="text" id="source" placeholder="北京小黑裙有限公司"></input>
                                                    </div>
                                                    <div class="clear"></div>
                                                    <div class=" find-col">
                                                            <span class="find_sp">风&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                                                            <div class="find_div bs-example" style="margin-bottom: 10px; height:auto;">
                                                                <input type="text" value="" id="style" data-role="tagsinput" placeholder="输入内容后，敲回车键生成标签" />
                                                                <div class="find_div_xianshi" >
                                                                    <span>这里是提示</span>
                                                                </div>
                                                            </div>
                                                    </div>
                                                    <div class="clear"></div>
                                                    <div class=" find-col" >
                                                            <span class="find_sp">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</span>
                                                            <textarea class="  find_div bs-example" id="memo"></textarea>
                                                    </div>
                                                   
                                            </div>
                                        </div>
                            </div>
                          
                        
                               
                             <div class="center">
                                    <button type="button" id="add" class="btn btn-primary">确定新增</button>
                                    <button type="button" id="give_up" class="btn btn-default">放弃新增</button>
                            </div>    
                        </div>
            		</div>
            	</div>
            </section>
            </aside><!-- /.right-side -->

        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <style type="text/css">
        .custorm-view{
                border: none;
            }
            .bold{
            	font-size: 14px;
            	font-weight: bold;
            }
        .clear{
            clear: both;
            width: 100%;
            height: 1px;

        }
        .beizhu{
            width: 91%;
            padding-left: 10px;
            line-height: 40px;
            margin-top: 20px;
            margin-left: 5%;
        }
        .find_sp{
            margin-bottom: 10px;
            padding: 0 10px;
            display: inline-block;
            font-weight: bold;
            float: left;
            padding-right: 5px;
            line-height: 30px;
        }
        .find_div{
            width: 90%;
            height:90px;
            border:1px solid #ccc;
            float: left;
        }
        .ol_left{
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0;
            margin: 0;
        }
        .ol_left>li{
            float: left;
            margin-right: 5px; 
        }
        .six-font{
            font-size: 14px;
        }
        .six-font>span{
            font-size: 16px;
        }
     
        .pull-left {
            border-left: 6px solid #3882FF;
            padding: 0 5px;
        }
        .photo{
            height: 430px;
            max-height: 430px;
            border:1px solid #ccc;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 0;
        }
        .shangchuan{
            margin-top: 100px;
            position: relative;
            cursor: pointer;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }
        .shangchuan  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        .zhanshi{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            display: none;
            background-color: #fff;

        }
        .zhanshi_find1{
            widows: 96%;
            height: 96%;
            margin: 1% 2%;
        }
        .zhanshi_find1>.col-md-8{
            height: 100%;
            padding: 0;
        }
        .zhanshi img{
            width: 100%;
            height: 100%;
            border-width: 0;
        }
        .zhanshi_find1>.col-md-4{padding: 0;}
        .zhanshi_find1>.col-md-4>span{
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .span_active{
            border:2px solid #3882FF !important;
            box-shadow: 0 0 3px #3882ff;
        }
        .zhanshi_find1>.col-md-4>span>p{
            position: absolute;
            width: 100%;
            text-align: center;
            height: 20px;
            line-height: 20px;
            bottom: -10px;
            font-size: 10px;
            background-color: #4f8aee;
            color: #fff;
            display: none;
        }
        .zhanshi_find1>.col-md-4>span>i{
           position: absolute;
           top: -3px;
           right: -7px;
           z-index: 9;
        }
        #zhanshi_photo{
        	width: 720px;
        	height: 405px;
        	border: 1px solid #ccc;
        }
        .tianjia{
            display: inline-block;
            width: 20%;
            height: 60px;
            display: inline-block;
            float: left;
            border:1px solid #ccc;
            cursor: pointer;
            margin:0 0 10px  10px;
            position: relative;
        }
        .tianjia  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer;
            width:100%;
            height: 100%;
        }
        .shejixinxi{
            border:1px solid #ccc;
        }
        .bootstrap-tagsinput input {
		    padding:0;
			width: 100%;
		}
       .bootstrap-tagsinput{
        border:none;
       }
       .bootstrap-tagsinput .tag{
        margin-right: 2px;
        color: #3882ff;
        border: 1px solid;
        border-radius: 0;
       }
       .label-info{
        background-color: #fff;
       }
       .find_div2{
        width: 40%;
        height: 32px;
        overflow: hidden;
        float: left;
        line-height: 26px;
       }
       .find_div_xianshi{
        height: 30px;
        line-height: 30px;
        width: 100%;
        position: absolute;
        bottom: -28px;
        z-index: 9;
        border:1px solid #ccc;
        background-color: #fff;
        display: none;
       }
       .find_div_xianshi>span{
        padding: 0 10px;
       }
		.find_div{
            position: relative;
        }
        .find-row label {
		    padding: 0 5px;
		}
        </style>
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->  

        <script src="../js/bootstrap-tagsinput.js"></script>

        <script src="../js/sampleStore/sampleStore_add.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                


                $("#file_upload").click(function () {
                	$('#file_upload2').click();
                });

                $('#file_upload2').change(selectImage);
               
                function selectImage(){
                	$('.zhanshi').show();
                	
                    var $file = $(this);
                    var fileObj = $file[0];
                    var windowURL = window.URL || window.webkitURL;
                    var dataURL;
                    var $img = $("#zhanshi_photo");
                    if (fileObj && fileObj.files && fileObj.files[0]) {
                        dataURL = windowURL.createObjectURL(fileObj.files[0]);
                        if($(':file').length==1)
                        	$img.attr('src', dataURL);
                    } else {
                        dataURL = $file.val();
                        var imgObj = document.getElementById("zhanshi_photo");
                        // 两个坑:
                        // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
                        // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
                        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        if($(':file').length==1)
                        	imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

                    }
                     var a=$('<span >'+'<i class="fa fa-fw fa-times"></i> <img src="'+dataURL+'">'+'  <p >主图</p>'+' </span> ');
                     // '+dataURL+'
					a.children('i').click(removeImage);
                    
					a.find('p').click(selectMainImage);
					
					a.hover(function () {
                        $(this).find('p').show();
					},function(){
						if($(this).find('p').html()!='主图')
                      		$(this).find('p').hide();
					});
                     
                    $('.tianjia').before(a);
                    
                    if($(':file').length>1){
                    	a.find('p').html('设为主图');
                    }
                    
                    if($(':file').length==1)
                    	$('.tianjia').siblings().children('p').eq(0).css('display','block');
                    
                    $('.zhanshi_find1 .col-md-4 span').click(function(){
                        $(this).addClass('span_active');
                        $(this).siblings('span').removeClass('span_active');
                        //$(this).find("p").show();
                        //$(this).siblings('span').find("p").hide();
                        var src=$(this).find('img').attr('src');
                        $("#zhanshi_photo").attr("src",src);

                    })
					
                    var input=$('<input type="file" accept="image/*" id="file_upload2"/>')
                    $(this).removeAttr('id').hide().after(input);
                    input.change(selectImage);
					if($(':file').length==6){
						$(this).parent().hide();
					}
					
                }
                
                 $('.zhanshi_find1 .col-md-4 span').click(function(){
                        $(this).addClass('span_active');
                        $(this).siblings('span').removeClass('span_active');
                        $(this).find("p").show();
                        $(this).siblings('span').find("p").hide();
                        var src=$(this).find('img').attr('src');
                        $("#zhanshi_photo").attr("src",src);

                    });
                 
        	});
            
            function removeImage(){
				$('.tianjia').show();
				var index=$('.zhanshi_find1 .col-md-4 span').index($(this).parent());
				$(this).parent().remove();
				$(':file').eq(index).remove();
                if($(this).next().next().css('display')=='block'){
                    $("#zhanshi_photo").attr('src',null);
                }
                return false;
            }
            
            function selectMainImage(){
				$(this).parent().siblings('span').find('p').html('设为主图').hide();
				$(this).html('主图');
				return false;
			}
            
            $(function(){
            	$('.bootstrap-tagsinput').children('input').attr('placeholder','输入内容后，敲回车键生成标签');
            })

            
        </script>
        
    </body>
</html>
